<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from './store/useAuthStore'
import { User, Setting, SwitchButton, Picture, Tools, InfoFilled, User as UserIcon, HomeFilled, GoldMedal, QuestionFilled, ArrowDown, UserFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

// 用户认证状态
const isAuthenticated = computed(() => authStore.isAuthenticated)
const username = computed(() => authStore.user?.username || '')

// 打印认证信息并重新加载用户数据
const logAuthInfo = () => {
  console.log('App.vue - 认证状态:', authStore.isAuthenticated)
  console.log('App.vue - 用户信息:', authStore.user)
  console.log('App.vue - Token:', authStore.token)
  console.log('App.vue - localStorage user:', localStorage.getItem('user'))
  console.log('App.vue - localStorage token:', localStorage.getItem('token'))
  
  // 尝试手动重载用户数据
  const userStore = useAuthStore()
  userStore.loadUserFromStorage()
}

// 在组件挂载时检查认证状态
onMounted(() => {
  logAuthInfo()
  
  // 如果有token但没有用户信息，尝试获取用户信息
  const token = localStorage.getItem('token')
  if (token && !authStore.user) {
    console.log('有token但没有用户信息，尝试获取用户数据')
    authStore.fetchUserWithToken(token)
  }
})

// 导航到页面
const navigateTo = (path: string) => {
  router.push(path)
}

// 登录
const goToLogin = () => {
  router.push('/auth/login')
}

// 注册
const goToRegister = () => {
  router.push('/auth/register')
}

// 退出登录
const handleLogout = () => {
  authStore.logout()
  router.push('/')
}

// 是否收起侧边栏
const isCollapse = ref(false)

// 移动设备导航菜单可见性
const mobileMenuVisible = ref(false)

// 当前激活的菜单项
const activeMenu = computed(() => {
  return route.path
})

// 切换侧边栏
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

// 切换移动菜单
const toggleMobileMenu = () => {
  mobileMenuVisible.value = !mobileMenuVisible.value
}

// 关闭移动菜单
const closeMobileMenu = () => {
  mobileMenuVisible.value = false
}
</script>

<template>
  <div class="website-container">
    <!-- 顶部导航栏 -->
    <header class="site-header">
      <div class="header-container">
        <div class="logo" @click="navigateTo('/')">
          <img src="./assets/logo.png" alt="Logo" class="logo-img">
          <span class="logo-text">水印工具</span>
        </div>

        <!-- 桌面端导航菜单 -->
        <nav class="desktop-nav">
          <ul class="nav-menu">
            <li :class="{ active: $route.path === '/' }">
              <a @click="navigateTo('/')">
                <el-icon class="nav-icon"><HomeFilled /></el-icon>
                首页
              </a>
            </li>
            <li :class="{ active: $route.path === '/tools' }">
              <a @click="navigateTo('/tools')">
                <el-icon class="nav-icon"><Tools /></el-icon>
                工具中心
              </a>
            </li>
            <li :class="{ active: $route.path === '/about' }">
              <a @click="navigateTo('/about')">
                <el-icon class="nav-icon"><InfoFilled /></el-icon>
                关于我们
              </a>
            </li>
            <li :class="{ active: $route.path === '/pricing' }">
              <a @click="navigateTo('/pricing')">
                <el-icon class="nav-icon"><GoldMedal /></el-icon>
                价格方案
              </a>
            </li>
            <li :class="{ active: $route.path === '/faq' }">
              <a @click="navigateTo('/faq')">
                <el-icon class="nav-icon"><QuestionFilled /></el-icon>
                常见问题
              </a>
            </li>
          </ul>
        </nav>

        <!-- 用户认证区域 -->
        <div class="auth-actions">
          <template v-if="isAuthenticated">
            <el-dropdown trigger="click">
              <div class="user-info">
                <el-avatar :size="32" class="user-avatar">
                  {{ username.charAt(0).toUpperCase() }}
                </el-avatar>
                <span class="username">{{ username }}</span>
                <el-icon class="user-dropdown-icon"><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="navigateTo('/user')">
                    <el-icon><User /></el-icon>个人中心
                  </el-dropdown-item>
                  <el-dropdown-item @click="navigateTo('/user/profile')">
                    <el-icon><User /></el-icon>账户信息
                  </el-dropdown-item>
                  <el-dropdown-item @click="navigateTo('/account/settings')">
                    <el-icon><Setting /></el-icon>账户设置
                  </el-dropdown-item>
                  <el-dropdown-item @click="navigateTo('/user/security')">
                    <el-icon><Setting /></el-icon>密码修改
                  </el-dropdown-item>
                  <el-dropdown-item @click="navigateTo('/history')">
                    <el-icon><Picture /></el-icon>处理历史
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="handleLogout">
                    <el-icon><SwitchButton /></el-icon>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template v-else>
            <el-button class="btn-login" @click="navigateTo('/auth/login')">登录</el-button>
            <el-button type="primary" class="btn-register" @click="navigateTo('/auth/register')">注册</el-button>
          </template>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="site-content">
      <router-view></router-view>
    </main>
  </div>
</template>

<style scoped>
/* 全局样式变量补充 */
:root {
  /* 核心颜色 */
  --primary-color: #13c2c2;
  --primary-light: #36cfc9;
  --primary-dark: #008f8f;
  --bg-color: #f0f2f5;
  
  /* 渐变和背景 */
  --primary-gradient: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
  
  /* 文本颜色 */
  --text-color: #333333;
  --text-secondary: #666666;
  
  /* 边框和圆角 */
  --border-color: #e4e7ed;
  --radius-base: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;
  
  /* 阴影 */
  --shadow-base: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  
  /* 过渡动画 */
  --transition-base: all 0.3s ease;
  --transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* 布局相关 */
  --container-max-width: 1400px;
  --header-height: 64px;
  
  /* 层级 */
  --z-header: 1000;
  --z-content: 1;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  color: #333;
  background-color: var(--bg-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  height: 100%;
}

.app-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
}

/* 侧边栏样式 */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--sidebar-width);
  background-color: #001529;
  z-index: 1001;
  box-shadow: var(--shadow-base);
  transition: var(--transition-base);
  display: flex;
  flex-direction: column;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar-logo {
  height: var(--header-height);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #002140;
  cursor: pointer;
  transition: var(--transition-base);
  overflow: hidden;
}

.logo-img {
  width: 32px;
  height: 32px;
  transition: var(--transition-base);
}

.logo-text {
  color: white;
  font-size: 18px;
  font-weight: 500;
  margin-left: 10px;
  white-space: nowrap;
  transition: var(--transition-base);
}

.scrollbar {
  flex: 1;
  overflow-y: auto;
}

.sidebar-menu {
  border-right: none;
  background-color: transparent;
}

.sidebar-menu .el-menu-item {
  color: rgba(255, 255, 255, 0.65);
}

.sidebar-menu .el-menu-item.is-active {
  background-color: var(--primary-color) !important;
  color: white;
}

.sidebar-menu .el-menu-item:hover {
  background-color: #263445;
  color: white;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.username {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.login-buttons {
  display: flex;
  gap: 8px;
}

/* 主内容区样式 */
.main-container {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: var(--transition-base);
  background-color: var(--bg-color);
}

.sidebar-collapse .main-container {
  margin-left: var(--sidebar-collapsed-width);
}

.main-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background-color: white;
  box-shadow: var(--shadow-base);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.toggle-button {
  display: block;
}

.mobile-toggle {
  display: none;
}

.page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 4px;
  transition: var(--transition-base);
}

.user-dropdown:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.user-dropdown span {
  margin: 0 8px;
}

.main-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.main-footer {
  height: var(--footer-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
  color: #888;
  font-size: 12px;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    position: fixed;
  }
  
  .sidebar.collapsed {
    width: var(--sidebar-width);
  }
  
  .main-container {
    margin-left: 0;
  }
  
  .sidebar-collapse .main-container {
    margin-left: 0;
  }
  
  .toggle-button {
    display: none;
  }
  
  .mobile-toggle {
    display: block;
  }
  
  .sidebar-logo {
    justify-content: flex-start;
  }
  
  .mobile-menu-visible .sidebar {
    transform: translateX(0);
  }
  
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }
  
  .hidden-sm-and-down {
    display: none;
  }
}

/* 网页布局样式 */
.website-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 头部导航样式增强 */
.site-header {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-base);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  height: 64px;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  height: 64px;
  max-width: 1400px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  padding: 5px 10px;
  border-radius: 4px;
}

.logo:hover {
  background-color: rgba(19, 194, 194, 0.05);
  transform: translateY(-2px);
}

.logo-img {
  width: 36px;
  height: 36px;
}

.logo-text {
  margin-left: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-color);
}

/* 桌面端导航菜单增强 */
.desktop-nav {
  display: flex;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 10px;
}

.nav-menu li {
  margin: 0 5px;
  position: relative;
}

.nav-menu li a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: var(--radius-base);
  transition: var(--transition-base);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.nav-icon {
  margin-right: 6px;
  font-size: 16px;
  opacity: 0.8;
}

.nav-menu li a:hover,
.nav-menu li.active a {
  color: var(--primary-color);
  background-color: rgba(19, 194, 194, 0.05);
}

.nav-menu li.active a {
  font-weight: 600;
}

.nav-menu li.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--primary-color);
  border-radius: var(--radius-full);
  transition: var(--transition-base);
}

.nav-menu li:hover.active::after {
  transform: translateX(-50%) scale(1.5);
}

/* 用户认证区域增强 */
.auth-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: var(--radius-base);
  transition: var(--transition-base);
}

.user-info:hover {
  background-color: rgba(19, 194, 194, 0.05);
}

.user-avatar {
  border: 2px solid var(--primary-light);
  transition: var(--transition-base);
}

.user-info:hover .user-avatar {
  transform: scale(1.05);
}

.username {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 500;
}

.user-dropdown-icon {
  margin-left: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  transition: transform 0.2s;
}

.user-info:hover .user-dropdown-icon {
  transform: rotate(180deg);
}

/* 下拉菜单样式 */
:deep(.el-dropdown-menu) {
  padding: 5px 0;
}

:deep(.el-dropdown-menu__item) {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--text-color);
  line-height: 1.5;
  display: flex;
  align-items: center;
}

:deep(.el-dropdown-menu__item:not(.is-disabled):hover) {
  background-color: rgba(19, 194, 194, 0.1);
  color: var(--primary-color);
}

:deep(.el-dropdown-menu__item .el-icon) {
  margin-right: 8px;
}

/* 按钮样式 */
.btn-login, .btn-register {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 80px;
  border-radius: var(--radius-base);
  font-weight: 500;
  transition: var(--transition-bounce);
}

.btn-login {
  color: var(--primary-color);
  border-color: var(--primary-light);
}

.btn-login:hover {
  background-color: rgba(19, 194, 194, 0.05);
  transform: translateY(-2px);
}

.btn-register {
  background: var(--primary-gradient);
  border: none;
  box-shadow: 0 4px 10px rgba(19, 194, 194, 0.2);
}

.btn-register:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(19, 194, 194, 0.3);
}

/* 移动端菜单按钮增强 */
.mobile-menu-toggle {
  display: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-base);
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-toggle:hover {
  background-color: rgba(19, 194, 194, 0.05);
}

.hamburger-icon {
  width: 24px;
  height: 20px;
  position: relative;
}

.hamburger-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: var(--text-color);
  border-radius: var(--radius-full);
  left: 0;
  transform: rotate(0deg);
  transition: var(--transition-base);
}

.hamburger-icon span:nth-child(1) {
  top: 0;
}

.hamburger-icon span:nth-child(2) {
  top: 9px;
}

.hamburger-icon span:nth-child(3) {
  top: 18px;
}

/* 移动端菜单增强 */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -80%;
  width: 80%;
  height: 100vh;
  background-color: var(--bg-light);
  z-index: 1001;
  box-shadow: var(--shadow-lg);
  transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-menu.active {
  right: 0;
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  backdrop-filter: blur(3px);
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.close-button {
  width: 24px;
  height: 24px;
  position: relative;
  cursor: pointer;
}

.close-button span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: var(--text-color);
  border-radius: var(--radius-full);
  top: 11px;
  left: 0;
  transition: var(--transition-base);
}

.close-button span:nth-child(1) {
  transform: rotate(45deg);
}

.close-button span:nth-child(2) {
  transform: rotate(-45deg);
}

.close-button:hover span {
  background-color: var(--primary-color);
}

.mobile-nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}

.mobile-nav-menu li {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: var(--transition-base);
}

.mobile-nav-menu li:hover,
.mobile-nav-menu li.active {
  background-color: rgba(19, 194, 194, 0.05);
  color: var(--primary-color);
}

.mobile-nav-menu li.active {
  border-left: 3px solid var(--primary-color);
}

.mobile-nav-menu li .el-icon {
  margin-right: 12px;
  font-size: 18px;
}

.mobile-nav-menu li span {
  font-size: 16px;
  font-weight: 500;
}

.mobile-auth-actions {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-btn-login, .mobile-btn-register {
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  border-radius: var(--radius-base);
  transition: var(--transition-base);
}

.mobile-btn-login {
  background: var(--primary-gradient);
  border: none;
  color: white;
}

.mobile-btn-register {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

/* 主内容区域 */
.site-content {
  flex: 1;
  width: 100%;
  background-color: var(--bg-color);
  padding-top: 20px;
}

/* 页脚样式增强 */
.site-footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  position: relative;
}

.footer-top-wave {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100px;
  overflow: hidden;
  line-height: 0;
}

.footer-top-wave svg {
  width: 100%;
  height: 100%;
}

.footer-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 60px 5% 20px;
}

.footer-top {
  display: flex;
  margin-bottom: 40px;
}

.footer-brand {
  flex: 1.2;
  padding-right: 30px;
}

.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.footer-logo img {
  width: 40px;
  height: 40px;
}

.footer-logo span {
  margin-left: 10px;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.footer-slogan {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
  line-height: 1.6;
}

.footer-social {
  display: flex;
  gap: 15px;
}

.social-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: var(--transition-base);
}

.social-icon:hover {
  background-color: var(--primary-color);
  transform: translateY(-3px);
}

.footer-columns {
  flex: 3;
  display: flex;
  justify-content: space-between;
}

.footer-column {
  flex: 1;
  padding: 0 15px;
}

.footer-column h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  color: white;
  position: relative;
  padding-bottom: 10px;
}

.footer-column h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: var(--primary-color);
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 12px;
}

.footer-column a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: var(--transition-base);
  display: block;
  padding: 3px 0;
}

.footer-column a:hover {
  color: var(--primary-color);
  transform: translateX(3px);
}

.footer-contact p {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
}

.footer-contact p i {
  margin-right: 10px;
  color: var(--primary-color);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: var(--transition-base);
}

.footer-links a:hover {
  color: var(--primary-color);
}

/* 响应式设计增强 */
@media (max-width: 992px) {
  .desktop-nav {
    display: none;
  }
  
  .mobile-menu-toggle {
    display: flex;
  }
  
  .header-container {
    padding: 0 20px;
  }
  
  .footer-top {
    flex-direction: column;
  }
  
  .footer-brand {
    margin-bottom: 30px;
    padding-right: 0;
  }
  
  .footer-columns {
    flex-wrap: wrap;
  }
  
  .footer-column {
    flex: 1 0 50%;
    margin-bottom: 30px;
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .footer-column {
    flex: 1 0 100%;
  }
}

@media (max-width: 576px) {
  .auth-actions .el-button {
    padding: 8px 12px;
  }
  
  .username {
    display: none;
  }
}
</style>
